import React, { Component } from 'react'
import classNames from 'classnames'
class TodoMain extends Component {
  render() {
    return (
      <section className="main">
        <input
          id="toggle-all"
          className="toggle-all"
          type="checkbox"
          checked={this.props.list.every((item) => item.done)}
          onChange={(e) => this.props.toggleAll(e.target.checked)}
        />
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul className="todo-list">
          {this.props.list.map((item) => (
            <li className={classNames({ completed: item.done })} key={item.id}>
              <div className="view">
                <input
                  className="toggle"
                  type="checkbox"
                  checked={item.done}
                  onChange={() => this.props.changeDone(item.id)}
                />
                <label>{item.name}</label>
                <button
                  className="destroy"
                  onClick={() => this.props.remove(item.id)}
                ></button>
              </div>
              <input className="edit" />
            </li>
          ))}
        </ul>
      </section>
    )
  }
}

export default TodoMain
